<template>
  <span v-if="props.showText">{{ currValue }}</span>
  <el-input
    v-else
    v-model="currValue"
    type="textarea"
    :rows="props.rows"
    :maxlength="props.maxLength"
    @input="handleInput"
    @blur="handleBlur"
    show-word-limit
  ></el-input>
</template>

<script setup>
import {ref, watch} from 'vue';

const emit = defineEmits(['update:modelValue', 'change', 'blur']);
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  rows: {
    type: Number,
    default: 5
  },
  maxLength: Number,
  showText: Boolean
});

const currValue = ref(props.modelValue || '');

const handleInput = (val) => {
  currValue.value = val;
  emit('update:modelValue', val);
  emit('change', val);
};

const handleBlur = (event) => {
  emit('update:modelValue', currValue.value);
  emit('blur', event);
};

watch(() => props.modelValue, (newVal) => {
  currValue.value = newVal || '';
});
</script>